<!-- -->
<template>
  <div>
    <div class="s-header">
      <div class="back">
        <span class="iconfont icon-left"></span>
      </div>
      <div class="s-left">
        <span>北京</span>
        <span class="iconfont icondown-fill-xs"></span>
      </div>
      <form
        action="javascript:void(0);"
        class="s-input"
      >
        <van-search
          placeholder="请输入搜索关键词"
          v-model="value"
          @search="onSearch"
        />
      </form>
      <router-link
        to="/search"
        tag="div"
        class="s-home"
      >
        <span class="iconfont icon-home"></span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: ''
    }
  },
  methods: {
    onSearch (value) {
      console.log(value)
    }
  }
}
</script>
<style lang='stylus' scoped>
@import '~common/stylus/variable';
>>>.van-search__content {
  background-color: #fff;
}
>>>.van-search {
  padding: 0px;
  margin-top: 0.43rem;
}
.s-header {
  display: flex;
  width: 100%;
  height: $tools-height;
  line-height: $tools-height;
  background-color: $color-header-theme;
  .back {
    float: left;
    span {
      line-height: $tools-height;
      font-size: $font-size-large-x;
    }
  }
  .s-left {
    text-align: center;
    line-height: $tools-height;
    font-size: $font-size-medium-x;
    margin-left: 0.4rem;
    padding: 0 0.4rem;
  }
  .s-input {
    flex: 1;
    height: 2rem;
  }
  .s-home {
    padding: 0px 10px;
    line-height: $tools-height;
    font-size: $font-size-large-x;
    span {
      color: $color-text-gray;
    }
  }
}
</style>
